<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>每月明细 - 快答答题</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa, #e6f0ff);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            padding-bottom: 30px;
        }
        
        /* 统一标题栏样式 */
        #header {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            padding: 12px 16px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .header_con {
            display: flex;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        .back {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 8px 12px;
            position: absolute;
            left: 0;
        }
        
        .back:hover {
            transform: translateX(-5px);
        }
        
        .back span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/></svg>') no-repeat center;
            background-size: contain;
        }
        
        .top_tit {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        /* 主内容区域 */
        #content_monthly {
            max-width: 800px;
            margin: 20px auto;
            padding: 0 15px;
        }
        
        /* 月份卡片 */
        .month-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 25px;
            overflow: hidden;
            position: relative;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s forwards;
        }
        
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .month-card:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
        }
        
        .month-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #6a11cb, #2575fc);
        }
        
        .card-header {
            padding: 15px 20px;
            background: #f8fbff;
            border-bottom: 1px solid #f0f5ff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .month-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .month-title i {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #2575fc, #6a11cb);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        .total-score {
            font-size: 18px;
            font-weight: 700;
            color: #ff6b00;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .total-score span {
            background: linear-gradient(135deg, #ff9a00, #ff6b00);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 14px;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .score-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 15px;
        }
        
        .score-item {
            background: #f8fbff;
            border-radius: 12px;
            padding: 15px 10px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .score-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(37, 117, 252, 0.1);
        }
        
        .score-icon {
            width: 50px;
            height: 50px;
            margin: 0 auto 10px;
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }
        
        .score-value {
            font-size: 20px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 3px;
        }
        
        .score-label {
            font-size: 13px;
            color: #7f8c8d;
        }
        
        .card-footer {
            padding: 15px 20px;
            background: #fff8e6;
            border-top: 1px solid #ffecb3;
            font-size: 13px;
            color: #ff6b00;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .card-footer i {
            color: #ff9a00;
        }
        
        /* 图表容器 */
        .chart-container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 25px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s 0.2s forwards;
        }
        
        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .chart-title {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .chart-controls {
            display: flex;
            gap: 10px;
        }
        
        .chart-btn {
            padding: 8px 15px;
            background: #f0f5ff;
            border: none;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .chart-btn:hover, .chart-btn.active {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            color: white;
        }
        
        /* 图表样式 */
        .chart {
            height: 200px;
            display: flex;
            align-items: flex-end;
            gap: 15px;
            padding: 15px 0;
            border-bottom: 1px solid #f0f5ff;
            margin-bottom: 15px;
        }
        
        .chart-bar-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
        }
        
        .chart-bar {
            flex: 1;
            width: 80%;
            max-width: 50px;
            background: linear-gradient(to top, #6a11cb, #2575fc);
            border-radius: 8px 8px 0 0;
            position: relative;
            transition: all 0.5s ease;
            transform-origin: bottom;
            animation: growBar 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            transform: scaleY(0);
        }
        
        @keyframes growBar {
            to {
                transform: scaleY(1);
            }
        }
        
        .chart-bar:hover {
            opacity: 0.9;
            transform: scaleY(1.05) !important;
        }
        
        .chart-label {
            text-align: center;
            font-size: 12px;
            color: #7f8c8d;
            margin-top: 8px;
            font-weight: 500;
        }
        
        .chart-value {
            position: absolute;
            top: -25px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 12px;
            font-weight: 700;
            color: #2575fc;
        }
        
        /* 统计信息 */
        .chart-stats {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .stat-item {
            background: #f8fbff;
            border-radius: 12px;
            padding: 12px 15px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            min-width: 200px;
        }
        
        .stat-item strong {
            margin-left: 4px;
        }
        
        /* 加载动画 */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.95);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            transition: opacity 0.5s, visibility 0.5s;
            flex-direction: column;
        }
        
        #preloader.hidden {
            opacity: 0;
            visibility: hidden;
        }
        
        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f0f5ff;
            border-top: 5px solid #2575fc;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .loading-text {
            margin-top: 20px;
            text-align: center;
            font-size: 16px;
            color: #2c3e50;
            font-weight: 500;
        }
        
        /* 月份筛选 */
        .month-filter {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            overflow-x: auto;
            padding: 10px 0;
            -ms-overflow-style: none;
            scrollbar-width: none;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s 0.1s forwards;
        }
        
        .month-filter::-webkit-scrollbar {
            display: none;
        }
        
        .month-btn {
            padding: 10px 20px;
            background: white;
            border: none;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            flex-shrink: 0;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }
        
        .month-btn:hover, .month-btn.active {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(37, 117, 252, 0.3);
        }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            display: none;
        }
        
        .empty-state i {
            font-size: 60px;
            color: #e0e6ff;
            margin-bottom: 20px;
        }
        
        .empty-state h3 {
            font-size: 18px;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .empty-state p {
            font-size: 14px;
            color: #7f8c8d;
            max-width: 300px;
            margin: 0 auto;
        }
        
        /* 响应式设计 */
        @media (max-width: 600px) {
            .score-grid {
                grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
            }
            
            .month-filter {
                gap: 8px;
            }
            
            .month-btn {
                padding: 8px 15px;
                font-size: 13px;
            }
            
            .chart-stats {
                flex-direction: column;
            }
            
            .stat-item {
                min-width: 100%;
            }
            
            .chart-bar {
                width: 70%;
            }
        }
        
        /* 卡片延迟动画 */
        .month-card:nth-child(1) { animation-delay: 0.3s; }
        .month-card:nth-child(2) { animation-delay: 0.4s; }
        .month-card:nth-child(3) { animation-delay: 0.5s; }
        
        /* 数据汇总 */
        .summary-container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 25px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s 0.15s forwards;
        }
        
        .summary-item {
            text-align: center;
            padding: 15px;
            border-radius: 12px;
            background: #f8fbff;
        }
        
        .summary-value {
            font-size: 28px;
            font-weight: 700;
            color: #2575fc;
            margin: 10px 0;
        }
        
        .summary-label {
            font-size: 14px;
            color: #7f8c8d;
        }
        
        .summary-item:nth-child(1) .summary-value { color: #ff6b00; }
        .summary-item:nth-child(2) .summary-value { color: #34c759; }
        .summary-item:nth-child(3) .summary-value { color: #af52de; }
    </style>
</head>
<body>
    <!-- 页面加载动画 -->
    <div id="preloader">
        <div class="spinner"></div>
        <p class="loading-text">正在加载月度答题数据...</p>
    </div>
    
    <!-- 标题栏 -->
    <header id="header">
        <div class="header_con">
            <a href="javascript:history.go(-1);" class="back">
                <span></span>
            </a> 
            <div class="top_tit">每月明细</div>
        </div>
    </header>

    <!-- 主内容区 -->
    <div id="content_monthly">
        <!-- 数据汇总 -->
        <div class="summary-container">
            <div class="summary-item">
                <i class="fas fa-trophy" style="font-size: 24px; color: #ff9a00;"></i>
                <div class="summary-value">2850分</div>
                <div class="summary-label">历史最高分</div>
            </div>
            <div class="summary-item">
                <i class="fas fa-chart-line" style="font-size: 24px; color: #34c759;"></i>
                <div class="summary-value">+15%</div>
                <div class="summary-label">本月增长率</div>
            </div>
            <div class="summary-item">
                <i class="fas fa-medal" style="font-size: 24px; color: #af52de;"></i>
                <div class="summary-value">第12名</div>
                <div class="summary-label">当前排名</div>
            </div>
        </div>
        
        <!-- 月份筛选 -->
        <div class="month-filter">
            <button class="month-btn active" data-filter="all">全部月份</button>
            <button class="month-btn" data-filter="2025">2025年</button>
            <button class="month-btn" data-filter="2026">2026年</button>
            <button class="month-btn" data-filter="1月">1月</button>
            <button class="month-btn" data-filter="2月">2月</button>
            <button class="month-btn" data-filter="3月">3月</button>
            <button class="month-btn" data-filter="4月">4月</button>
            <button class="month-btn" data-filter="5月">5月</button>
            <button class="month-btn" data-filter="6月">6月</button>
            <button class="month-btn" data-filter="7月">7月</button>
        </div>
        
        <!-- 空状态提示 -->
        <div class="empty-state" id="emptyState">
            <i class="fas fa-calendar-times"></i>
            <h3>没有找到相关月份数据</h3>
            <p>请选择其他月份或年份进行查看</p>
        </div>
        
        <!-- 图表容器 -->
        <div class="chart-container">
            <div class="chart-header">
                <div class="chart-title">
                    <i class="fas fa-chart-line"></i>
                    月度得分趋势
                </div>
                <div class="chart-controls">
                    <button class="chart-btn active" data-chart="month">月趋势</button>
                    <button class="chart-btn" data-chart="year">年对比</button>
                </div>
            </div>
            
            <div class="chart" id="scoreChart">
                <!-- 图表柱状图由JS生成 -->
            </div>
            
            <div class="chart-footer">
                <div class="chart-stats">
                    <div class="stat-item">
                        <i class="fas fa-arrow-up" style="color: #34c759;"></i>
                        本月增长: <strong>15%</strong>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-trophy" style="color: #ff9a00;"></i>
                        最高得分: <strong>2850分</strong> (2025年4月)
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-clock" style="color: #007aff;"></i>
                        平均答题: <strong>32秒</strong> (每题)
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 2025年4月卡片 -->
        <div class="month-card" data-year="2025" data-month="4月">
            <div class="card-header">
                <div class="month-title">
                    <i class="fas fa-calendar"></i>
                    2025年4月
                </div>
                <div class="total-score">
                    总分: <span>2850分</span>
                </div>
            </div>
            
            <div class="card-body">
                <div class="score-grid">
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-lightbulb"></i>
                        </div>
                        <div class="score-value">850</div>
                        <div class="score-label">答题分数</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <div class="score-value">420</div>
                        <div class="score-label">速度加成</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-fire"></i>
                        </div>
                        <div class="score-value">380</div>
                        <div class="score-label">连对奖励</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="score-value">300</div>
                        <div class="score-label">成就奖励</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-gift"></i>
                        </div>
                        <div class="score-value">250</div>
                        <div class="score-label">活动奖励</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-award"></i>
                        </div>
                        <div class="score-value">200</div>
                        <div class="score-label">排名奖励</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-check-double"></i>
                        </div>
                        <div class="score-value">180</div>
                        <div class="score-label">任务完成</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <div class="score-value">170</div>
                        <div class="score-label">签到奖励</div>
                    </div>
                </div>
            </div>
            
            <div class="card-footer">
                <i class="fas fa-info-circle"></i>
                备注：本月排名第12位（前15%），答题准确率92%
            </div>
        </div>
        
        <!-- 2025年5月卡片 -->
        <div class="month-card" data-year="2025" data-month="5月">
            <div class="card-header">
                <div class="month-title">
                    <i class="fas fa-calendar"></i>
                    2025年5月
                </div>
                <div class="total-score">
                    总分: <span>2450分</span>
                </div>
            </div>
            
            <div class="card-body">
                <div class="score-grid">
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-lightbulb"></i>
                        </div>
                        <div class="score-value">750</div>
                        <div class="score-label">答题分数</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <div class="score-value">350</div>
                        <div class="score-label">速度加成</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-fire"></i>
                        </div>
                        <div class="score-value">320</div>
                        <div class="score-label">连对奖励</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="score-value">250</div>
                        <div class="score-label">成就奖励</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-gift"></i>
                        </div>
                        <div class="score-value">200</div>
                        <div class="score-label">活动奖励</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-award"></i>
                        </div>
                        <div class="score-value">180</div>
                        <div class="score-label">排名奖励</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-check-double"></i>
                        </div>
                        <div class="score-value">150</div>
                        <div class="score-label">任务完成</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <div class="score-value">150</div>
                        <div class="score-label">签到奖励</div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <i class="fas fa-info-circle"></i>
                备注：本月排名第18位（前20%），答题准确率89%
            </div>
        </div>
        
        <!-- 2025年6月卡片 -->
        <div class="month-card" data-year="2025" data-month="6月">
            <div class="card-header">
                <div class="month-title">
                    <i class="fas fa-calendar"></i>
                    2025年6月
                </div>
                <div class="total-score">
                    总分: <span>2100分</span>
                </div>
            </div>
            
            <div class="card-body">
                <div class="score-grid">
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-lightbulb"></i>
                        </div>
                        <div class="score-value">700</div>
                        <div class="score-label">答题分数</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <div class="score-value">320</div>
                        <div class="score-label">速度加成</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-fire"></i>
                        </div>
                        <div class="score-value">280</div>
                        <div class="score-label">连对奖励</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="score-value">220</div>
                        <div class="score-label">成就奖励</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-gift"></i>
                        </div>
                        <div class="score-value">180</div>
                        <div class="score-label">活动奖励</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-award"></i>
                        </div>
                        <div class="score-value">150</div>
                        <div class="score-label">排名奖励</div>
                    </div>
                    
                    <div class="score-item">
                        <div class="score-icon">
                            <i class="fas fa-check-double"></i>
                        </div>
                        <div class="score-value">120</div>
                        <div class="score-label">任务完成</div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <i class="fas fa-info-circle"></i>
                备注：本月排名第25位（前30%），答题准确率87%
            </div>
        </div>
    </div>

    <script>
        // 模拟加载完成
        setTimeout(() => {
            document.getElementById('preloader').classList.add('hidden');
            
            // 初始化图表
            initChart();
            
            // 触发卡片动画
            document.querySelectorAll('.month-card').forEach(card => {
                card.style.visibility = 'visible';
            });
        }, 1500);
        
        // 图表初始化
        function initChart() {
            const chart = document.getElementById('scoreChart');
            // 清空图表容器，防止重复添加
            chart.innerHTML = '';
            
            // 修复数据与实际卡片一致
            const months = ['1月', '2月', '3月', '4月', '5月', '6月'];
            const scores = [1850, 1950, 2100, 2850, 2450, 2100];
            const maxScore = Math.max(...scores);
            
            months.forEach((month, index) => {
                const barHeight = (scores[index] / maxScore) * 150;
                const delay = index * 0.1;
                
                const barContainer = document.createElement('div');
                barContainer.className = 'chart-bar-container';
                barContainer.style.flex = '1';
                barContainer.style.display = 'flex';
                barContainer.style.flexDirection = 'column';
                barContainer.style.alignItems = 'center';
                barContainer.style.height = '100%';
                
                const bar = document.createElement('div');
                bar.className = 'chart-bar';
                bar.style.height = `${barHeight}px`;
                bar.style.animationDelay = `${delay}s`;
                
                const value = document.createElement('div');
                value.className = 'chart-value';
                value.textContent = scores[index];
                
                const label = document.createElement('div');
                label.className = 'chart-label';
                label.textContent = month;
                
                bar.appendChild(value);
                barContainer.appendChild(bar);
                barContainer.appendChild(label);
                chart.appendChild(barContainer);
            });
        }
        
        // 初始化年对比图表
        function initYearChart() {
            const chart = document.getElementById('scoreChart');
            chart.innerHTML = '';
            
            const years = ['2023年', '2024年', '2025年'];
            const scores = [14500, 17800, 21000];
            const maxScore = Math.max(...scores);
            
            years.forEach((year, index) => {
                const barHeight = (scores[index] / maxScore) * 150;
                const delay = index * 0.1;
                
                const barContainer = document.createElement('div');
                barContainer.className = 'chart-bar-container';
                barContainer.style.flex = '1';
                barContainer.style.display = 'flex';
                barContainer.style.flexDirection = 'column';
                barContainer.style.alignItems = 'center';
                barContainer.style.height = '100%';
                
                const bar = document.createElement('div');
                bar.className = 'chart-bar';
                bar.style.height = `${barHeight}px`;
                bar.style.background = 'linear-gradient(to top, #ff6b00, #ff9a00)';
                bar.style.animationDelay = `${delay}s`;
                
                const value = document.createElement('div');
                value.className = 'chart-value';
                value.textContent = scores[index];
                value.style.color = '#ff6b00';
                
                const label = document.createElement('div');
                label.className = 'chart-label';
                label.textContent = year;
                
                bar.appendChild(value);
                barContainer.appendChild(bar);
                barContainer.appendChild(label);
                chart.appendChild(barContainer);
            });
        }
        
        // DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            const monthBtns = document.querySelectorAll('.month-btn');
            const monthCards = document.querySelectorAll('.month-card');
            const emptyState = document.getElementById('emptyState');
            
            // 月份筛选交互
            monthBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    monthBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    const filter = this.getAttribute('data-filter');
                    let hasMatch = false;
                    
                    // 显示所有卡片
                    if (filter === 'all') {
                        monthCards.forEach(card => {
                            card.style.display = 'block';
                        });
                        emptyState.style.display = 'none';
                        return;
                    }
                    
                    // 筛选卡片
                    monthCards.forEach(card => {
                        const year = card.getAttribute('data-year');
                        const month = card.getAttribute('data-month');
                        
                        if (filter === year || filter === month) {
                            card.style.display = 'block';
                            hasMatch = true;
                        } else {
                            card.style.display = 'none';
                        }
                    });
                    
                    // 如果没有匹配项，显示空状态
                    emptyState.style.display = hasMatch ? 'none' : 'block';
                });
            });
            
            // 图表切换按钮交互
            const chartBtns = document.querySelectorAll('.chart-btn');
            chartBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    chartBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    const chartType = this.getAttribute('data-chart');
                    
                    // 显示加载动画
                    document.getElementById('preloader').classList.remove('hidden');
                    
                    setTimeout(() => {
                        document.getElementById('preloader').classList.add('hidden');
                        
                        if (chartType === 'year') {
                            initYearChart();
                        } else {
                            initChart();
                        }
                    }, 800);
                });
            });
        });
    </script>
</body>
</html>